<template>
  <div class="tamplateHeader">
    <div class="container">
      <el-icon :size="20" :color="'#000000'" class="icons" @click="closeFun">
        <Close />
      </el-icon>
      <div class="operation">
        <el-button type="primary" @click="submit">提交模板</el-button>
        <el-button type="primary" @click="uncheck">取消选中</el-button>
        <el-button type="primary" @click="previewPage">预览网页</el-button>
        <el-button class="reset" @click="reset">重置模板</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Close } from "@element-plus/icons-vue";
const emit = defineEmits(["close", "submit", "reset","uncheck","previewPage"]);
const closeFun = () => {
  emit("close");
};
const submit = () => {
  emit("submit");
}
const reset = () => {
  emit("reset");
}
const uncheck =()=>{
  emit("uncheck");
}
const previewPage =()=>{
  emit("previewPage");
}
</script>

<style lang="scss" scoped>
.tamplateHeader {
  width: 100%;
  height: 60px;

  .container {
    width: calc(100% - 20px);
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icons {
      cursor: pointer;
    }

    .operation {
      .reset {
        margin-left: 10px;
      }
    }
  }
}
</style>
